<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --deg: 90deg
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            transition: 0.4s;

            background-color: #d4e1e7;
            background-image: url('https://test.sanshukeji.com/profile/bg1.jpg');
            background-position: 0 -50vw;
            background-repeat: no-repeat;
            background-clip: border-box;
            background-origin: border-box;
            background-size: auto;
        }

        .circle-container {
            position: absolute;
            top: calc(50vh - 50vw);
            right: -55vw;
            width: 100vw;
            height: 100vw;
            border-radius: 50%;
            background-image: url('https://test.sanshukeji.com/profile/bg1.jpg');
            background-repeat: no-repeat;
            background-position: -55vw calc(50vw - 50vh - 50vw);
            cursor: grab;
            box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.8);
            transition: 0.4s;
        }

        .circle-container:active {
            cursor: grabbing;
        }

        .line {
            position: absolute;
            left: calc(50% - 5px);
            top: 50%;
            width: 10px;
            height: 50%;
            transform-origin: 50% 0;
            background-color: rgba(225, 224, 222, 0.6);
            box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.6);
        }

        .line:nth-child(1) {
            transform: rotate(calc(var(--deg) * 0 + 45deg));
        }

        .line:nth-child(2) {
            transform: rotate(calc(var(--deg) * 1 + 45deg));
        }

        .line:nth-child(3) {
            transform: rotate(calc(var(--deg) * 2 + 45deg));
        }

        .line:nth-child(4) {
            transform: rotate(calc(var(--deg) * 3 + 45deg));
        }

        .circle-center {
            position: absolute;
            top: calc(50vh - 25vw);
            right: -27.5vw;
            width: 50vw;
            height: 50vw;
            border-radius: 50%;
            background-image: url('https://test.sanshukeji.com/profile/bg1.jpg');
            background-repeat: no-repeat;
            background-position: calc(-100vw + 50vw - 27.5vw) calc(-50vh + 25vw - 50vw);
            box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.8);
            transition: 0.4s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #rtitle {
            background-color: rgba(0, 0, 0, 0);
            font-size: 40px;
            line-height: 40px;
            color: white;
            padding-right: 27vw;
            text-shadow: 2px 2px 4px #000000;
        }

        /* .circle-container:hover {
            animation: rotateRr 2s 1 linear;
        } */

        @keyframes rotateFw {
            to {
                transform: rotate(-90deg);
            }
        }

        @keyframes rotateRr {
            to {
                transform: rotate(90deg);
            }
        }

        .login {
            position: absolute;
            width: 32vw;
            height: 400px;
            display: flex;
            top: calc(50vh - 250px);
            left: 8vw;
            background-color: rgba(0, 0, 0, 0);
            color: #fff;
            transition: 0.4s;
        }

        .login-form {
            width: 100%;
            height: 100%;
            margin: auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            background-color: rgba(160, 160, 160, 0.4);
            box-shadow: 0 0 3px 2px rgb(0, 0, 0);
            backdrop-filter: blur(3px);
            /* background-color: #f9f9f9; */
        }

        .login-form h2 {
            text-align: center;
            margin-bottom: 60px;
        }

        .form-group {
            margin: 25px 0px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        button[type="submit"] {
            display: block;
            width: 100%;
            padding: 10px;
            margin-top: 50px;
            border: none;
            border-radius: 5px;
            color: #fff;
            background-color: #4CAF50;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .login {
            display: none;
        }

        #login0 {
            display: block;
        }

        button[type="submit"]:hover {
            background-color: #3e8e41;
        }
    </style>
</head>

<body>

    <div id="rotatable" class="circle-container">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>
    <div id="rotatable2" class="circle-center">
        <div id="rtitle">教育局</div>
    </div>
    <div id="login0" class="login">
        <form class="login-form">
            <h2>教育局登录</h2>
            <div class="form-group">
                <label for="username">手机号:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">验证码:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">登 录</button>
        </form>
    </div>
    <div id="login1" class="login">
        <form class="login-form">
            <h2>学校登录</h2>
            <div class="form-group">
                <label for="username">手机号:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">验证码:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">登 录</button>
        </form>
    </div>

    <div id="login2" class="login">
        <form class="login-form">
            <h2>社会力量登录</h2>
            <div class="form-group">
                <label for="username">手机号:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">验证码:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">登 录</button>
        </form>
    </div>

    <div id="login3" class="login">
        <form class="login-form">
            <h2>小程序登录</h2>
            <h1>这里显示二维码......</h1>
        </form>
    </div>


    <script type="text/javascript">
        var ports = ['教育局', '学校', '社会力量', '小程序']
        var i = 0;
        // 研学 /home/fxd/webapp/study3/files fxd账号下
        var pics = ['https://test.sanshukeji.com/profile/bg1.jpg', 'https://test.sanshukeji.com/profile/bg2.jpg', 'https://test.sanshukeji.com/profile/bg3.jpg', 'https://test.sanshukeji.com/profile/bg4.jpg'];

        const draggable = document.getElementById("rotatable");
        let startY;

        draggable.addEventListener('mousedown', function (e) {
            startY = e.pageY; // Record the starting Y position
            e.target.style.cursor = 'grabbing';

            function handleMouseUp(e) {
                document.removeEventListener('mouseup', handleMouseUp);
                e.target.style.cursor = 'grab';
                if (e.pageY - startY > 30) {
                    rotateFw();
                } else if (e.pageY - startY < -30) {
                    rotateRr();
                }
            }

            document.addEventListener('mouseup', handleMouseUp);
        });

        function rotateFw() {
            i++; if (i >= pics.length) { i = 0; }
            startTurns('rotateFw');
        }
        function rotateRr() {
            i--; if (i < 0) { i = pics.length - 1; }
            startTurns('rotateRr');
        }
        function startTurns(animation) {
            document.getElementById("rotatable").style.animation = 'none';

            setTimeout(() => {
                document.getElementById("rotatable").style.animation = animation + ' 2s 1 linear';

                setTimeout(() => {
                    for (const login of document.getElementsByClassName("login")) {
                        login.style.display = 'none';
                    }
                    document.getElementById("login" + i).style.display = "block";

                    var url = "url('" + pics[i] + "')";
                    document.body.style.backgroundImage = url;
                    document.getElementById("rotatable").style.backgroundImage = url;
                    document.getElementById("rotatable2").style.backgroundImage = url;

                    setTimeout(function () {
                        document.getElementById("rtitle").innerHTML = ports[i];
                    }, 400);
                }, 1200);
            }, 100);
        }
    </script>

</body>

</html>